<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua" crossorigin="anonymous"></script>
<!--    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"-->
<!--          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">-->
<!--    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"-->
<!--            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"-->
<!--            crossorigin="anonymous"></script>-->
<!--    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">-->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!--    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>-->
    <link rel="icon" href="/static/img/favicon1.ico" type="images/x-ico"/>
    <link rel="stylesheet" th:href="@{/static/css/show.css}">

    <!--layui-->
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
    <!--layui-->

    <title>观众投票</title>
</head>
<a th:href="@{/logout}" class="layui-btn">退出</a>
<body class="bj">
<div style="margin-top: 7%">
    <div class="container">
        <h1 align="center" style="background-color: #00f7de"> 第<span  id="mid" th:text="${info.getMid()}"></span>场</h1>
        <div class="playerData">
            <div class="col-lg-5 playerdiv">
                <input type="hidden" id="uid" th:value="${session.user.getId()}">
                <div class="headImg">
                    <img th:src="@{(${info.getAPictureUrl()})}" class="ti">
                </div>
                <div class="playerId">
                    <span th:text="${info.getAName()} ">888 号</span>
                    <b id="aid"  th:text="${info.getPlayerA()}"></b>号选手
                </div>
                <div style="width: 370px; margin: 0;">
                    <button type="button"  onclick="vote(1)"  class="layui-btn layui-btn-fluid">投票</button>
                </div>
            </div>
            <div class="col-lg-2 pk"></div>
            <div class="col-lg-5 playerdiv">
                <div class="headImg">
                    <img th:src="@{(${info.getBPictureUrl()})}" class="ti">
                </div>
                <div class="playerId">
                    <span th:text="${info.getBName()}">888 号</span>
                    <b id="bid" th:text="${info.getPlayerB()}"></b>@nbsp;号选手
                </div>
                <div style="width: 370px; margin: 0;">
                    <button type="button" onclick="vote(2)" class="layui-btn layui-btn-fluid">投票</button>
                </div>


            </div>
        </div>
    </div>
</div>
<script type="text/javascript">

    function vote(arr){

        var uid = $("#uid").val();
        // var uid = 111;
        var mid = $("#mid").text();
        var playerId;
        if (arr==1){

            playerId = $("#aid").text();
        }
        if (arr==2){
            playerId = $("#bid").text();
        }



        $.ajax({
            url:"/vote/do",
            dataType:"json",
            type:"post",
            data: {
                "uid":uid,"mid":mid,"pid":playerId
            },
            success:function (data){
                if (data.user.status==0){
                    alert("投票成功")
                    location.reload();
                }else if (data.user.status==1){
                    alert("亲，只能投一次喔。。。")
                    // location.reload();
                }

            }
        })
    }
</script>
</body>

</html>